<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<!-- 订单状态 -->
			<view class="header-orderstatus">订单{{curOrder.orderstatusStr}}</view>
			<!-- 订单状态 -->

			<!-- 订单说明 -->
			<view class="header-orderdesc">
				<view style="display: flex;" v-if="curOrder.orderstatus==0">剩余支付时间：
					<uni-countdown :show-day="false" :hour="0" :minute="init().minute" :second="init().second"
						:show-colon="true" @timeup="timeup" splitorColor="#FFFFFF" color="#FFFFFF" />
				</view>
				<view v-if="curOrder.orderstatus==1||curOrder.orderstatus==2">正在排队制作中，请稍等......</view>
				<view v-if="curOrder.orderstatus==3">订单已完成，祝您用餐愉快</view>
			</view>
			<!-- 订单说明 -->
			<view class="header-bottom"></view>
		</view>
		<!-- 头部 -->

		<!-- 门店及商品信息 -->
		<view class="shop-goodslist contentwidth">
			<!-- 门店信息 -->
			<view class="shop-goodslist-shop">
				<view class="shop-goodslist-shopname">{{curOrder.shop.sname}}<text decode="yes">&nbsp;&nbsp;&gt;</text>
				</view>
				<view class="shop-goodslist-shopaddress">{{curOrder.shop.saddress}}</view>
			</view>
			<!-- 门店信息 -->

			<!-- 订单商品列表 -->
			<view class="shop-goodslist-goods">
				<view class="mygoodslist" v-for="(item,sindex) in curOrder.goods" :key="sindex">
					<view class="mygoodslist-img-v">
						<image class="mygoodslist-img" :src="item.icon"></image>
					</view>
					<view class="mygoodslist-desc">
						<view class="mygoodslist-desc-left">
							<view class="mygoodslist-desc-left-name">{{item.name}}</view>
							<view class="mygoodslist-desc-left-bcontent">{{item.bcontent}}</view>
							<view class="mygoodslist-desc-left-bcontent" style="padding-top: 20rpx;"><text
									style="font-size: 20rpx;" decode="yes">X&nbsp;</text>{{item.buyNums}}</view>
						</view>
						<view class="mygoodslist-desc-right">￥{{item.bprice}}</view>
					</view>
				</view>
			</view>
			<!-- 订单商品列表 -->

			<!-- 总结 -->
			<view class="total">
				<view><text class="total-text">共{{curOrder.buyTotalNums}}件，合计</text><text
						class="total-totalprice">￥{{curOrder.allPrice}}</text></view>
				<view v-if="curOrder.orderstatus==3"><text class="total-desc">奖励155雪王币</text><text
						class="total-desc2">(完成订单后奖励次日到账)</text></view>
			</view>
			<!-- 总结 -->
		</view>
		<!-- 门店及商品信息 -->

		<!-- 兑换优惠劵 -->
		<view class="coupon contentwidth" v-if="curOrder.orderstatus>0">
			<image class="coupon-img" src="http://www.itlaobing.com/ice/other/coupon.png">
			</image>
		</view>
		<!-- 兑换优惠劵 -->

		<!-- 订单信息 -->
		<view class="orders contentwidth" v-if="curOrder.orderstatus!=0">
			<view class="orders-left">
				<text>下单时间</text>
				<text>订单编码</text>
				<text v-if="curOrder.orderstatus!=4">取餐号码</text>
				<text>备注</text>
			</view>
			<view class="orders-right">
				<text>{{curOrder.ordertime}}</text>
				<text>{{curOrder.orderid}}</text>
				<text v-if="curOrder.orderstatus!=4">{{curOrder.takeCode}}</text>
				<text>{{curOrder.beizhu}}</text>
			</view>
		</view>
		<!-- 订单信息 -->

		<!-- 支付按钮 -->
		<view class="pay" v-if="curOrder.orderstatus==0">
			<button class="pay-cancel" @click="paycancel">取消订单</button>
			<button class="pay-confirm" @click="payconfirm">确认支付</button>
		</view>
		<!-- 支付按钮 -->

		<!-- 尾部信息 -->
		<view class="footer" v-if="curOrder.orderstatus!=0">如有售后或退款问题，请联系门店</view>
		<!-- 尾部信息 -->
	</view>
</template>

<script>
	import fDate from "@/common/utils/formatDateUtil.js"
	const app = getApp()
	export default {
		data() {
			return {
				ordersList: [],
				curOrder: {
					shop:{
						sname:'',
						saddress:''
					}
				}
			}
		},
		onLoad(params) {
			// 获得订单信息
			uni.request({
				url: app.globalData.baseUrl + '/orders/findById/' + params.orderid,
				success: (result) => {
					// console.log(result)
					if (result.data.statusCode == 200 && result.data.mydata != null)
						this.curOrder = result.data.mydata
				}
			})
		},
		methods: {
			init() {
				var date = new Date();
				var now = date.getTime();
				var startTimeStr = this.curOrder.ordertime
				var startTime = new Date(startTimeStr).getTime() //获得当前时间与1970年1月1日时间相差的毫秒数
				var endTime = startTime + 1000 * 60 * 30; //结束时间与1970年1月1日时间相差的毫秒数 + 30分钟
				var leftTime = endTime - now; //计算两日期之间相差的毫秒数
				var myLeftTime = {}
				if (leftTime >= 0) {
					var d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					var h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					var m = Math.floor(leftTime / 1000 / 60 % 60);
					var s = Math.floor(leftTime / 1000 % 60);
					myLeftTime.minute = m
					myLeftTime.second = s
					console.log(d + '天' + h + '时' + m + '分' + s + '秒')
				}
				return myLeftTime
			},
			timeup() {
				this.curOrder.orderstatus = 4
				this.curOrder.orderstatusStr = "已取消"
				this.curOrder.paytime = ""
				this.curOrder.takeCode = -1
				// 更新订单
				uni.request({
					url: app.globalData.baseUrl + '/orders/updateorders',
					method: 'POST',
					data: this.curOrder,
					success: (result) => {
						
					}
				})
				//弹出提示信息
				uni.showToast({
					title: "支付时间超时，订单已取消",
					duration: 4000
				})
			},
			paycancel() {
				this.curOrder.orderstatus = 4
				this.curOrder.orderstatusStr = "已取消"
				this.curOrder.paytime = ""
				this.curOrder.takeCode = -1
				// 更新订单
				uni.request({
					url: app.globalData.baseUrl + '/orders/updateorders',
					method: 'POST',
					data: this.curOrder,
					success: (result) => {
						
					}
				})
				// 转向订单页面
				uni.reLaunch({
					url: "../orders/orders?orderstype=4"
				})
			},
			payconfirm() {
				this.curOrder.orderstatus = 1
				this.curOrder.orderstatusStr = "已支付"
				this.curOrder.paytime = fDate.formatTime(new Date())
				
				//取餐号码
				uni.request({
					url: app.globalData.baseUrl + '/takecode/gettakecode/'+this.curOrder.sid,
					success: (result) => {
						if (result.data.statusCode == 200 && result.data.mydata !=
							null) {
							this.curOrder.takeCode = result.data.mydata
						} else {
							this.curOrder.takeCode = 1000
						}
						
						// 已付
						uni.showToast({
							title:"取餐号码："+ this.curOrder.takeCode,
							duration: 6000
						})
						
						// 清空购物车
						uni.request({
							url: app.globalData.baseUrl + '/cart/delcart/' + this.curOrder.cartid + '/' + this.curOrder.cid +
								'/' + this.curOrder.sid
						})
						
						// 更新订单
						uni.request({
							url: app.globalData.baseUrl + '/orders/updateorders',
							method: 'POST',
							data: this.curOrder,
							success: (result) => {
								// 转向订单页面
								uni.reLaunch({
									url:"../orders/orders"
								})
							}
						})
					
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
		letter-spacing: 2rpx;
	}

	.contentwidth {
		width: 93vw;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.header {
		width: 100vw;
		height: 320rpx;
		background: url(http://www.itlaobing.com/ice/other/orderdetailbg.png) no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		color: #FFFFFF;
		font-weight: bold;
		position: relative;

		.header-orderstatus {
			font-size: 38rpx;
			padding-top: 130rpx;
			padding-left: 40rpx;
		}

		.header-orderdesc {
			font-size: 26rpx;
			padding-top: 15rpx;
			padding-left: 40rpx;
		}

		.header-bottom {
			width: 100%;
			height: 20rpx;
			position: absolute;
			bottom: 0;
			background-color: #F8F8F8;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
		}
	}

	.shop-goodslist {
		.shop-goodslist-shop {
			width: 100%;
			height: 90rpx;

			.shop-goodslist-shopname {
				font-size: 32rpx;
				color: #333333;

			}

			.shop-goodslist-shopaddress {
				font-size: 25rpx;
				color: #777777;
				padding-top: 10rpx;
			}
		}

		.shop-goodslist-goods {
			width: 100%;
			margin: 25rpx auto;
			box-sizing: border-box;
			padding: 20rpx;
			border-top: 1px dashed #CCCCCC;
			border-bottom: 1px dashed #CCCCCC;

			.mygoodslist {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 5rpx auto;

				.mygoodslist-img-v {
					width: 28%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.mygoodslist-img {
						width: 120rpx;
						height: 125rpx;
					}
				}

				.mygoodslist-desc {
					width: 70%;
					height: 100%;
					display: flex;
					justify-content: space-between;

					.mygoodslist-desc-left-name {
						font-size: 30rpx;
						color: #333333;
						padding-bottom: 8rpx;
					}

					.mygoodslist-desc-left-bcontent {
						font-size: 25rpx;
						color: #555555;
					}

					.mygoodslist-desc-right {
						font-size: 26rpx;
					}
				}
			}
		}

		.total {
			width: 100%;
			text-align: right;

			.total-text {
				font-size: 25rpx;
				color: #222222;
			}

			.total-totalprice {
				font-size: 32rpx;
				font-weight: bold;
			}

			.total-desc {
				color: orange;
				font-size: 24rpx;
			}

			.total-desc2 {
				color: #888888;
				font-size: 24rpx;
			}
		}
	}

	.coupon {
		height: 200rpx;
		padding: 0;
		overflow: hidden;

		.coupon-img {
			width: 100%;
			height: 100%;
		}
	}

	.orders {
		height: 240rpx;
		font-size: 28rpx;
		display: flex;

		text {
			display: block;
			width: 100%;
			height: 40rpx;
		}

		.orders-left {
			width: 24%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #777777;
			padding-left: 10rpx;
			box-sizing: border-box;
		}

		.orders-right {
			width: 72%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #777777;
		}

	}

	.pay {
		width: 100vw;
		height: 60px;
		border-top: 1px solid #EEEEEE;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		font-size: 30rpx;

		.pay-cancel {
			width: 260rpx;
			height: 45px;
			background-color: #FFFFFF;
			font-size: 34rpx;
		}

		.pay-confirm {
			width: 420rpx;
			height: 45px;
			background-color: #E60012;
			color: #FFFFFF;
			font-size: 34rpx;
		}
	}

	.footer {
		width: 100vw;
		height: 60rpx;
		color: #777777;
		font-size: 24rpx;
		text-align: center;
	}
</style>
